<!--
  -    Copyright (c) 2018-2025, lengleng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: lengleng (wangiegie@gmail.com)
  -->

<template>
  <!--弹窗内容-->
  <div class="app-container calendar-list-container">
      <div>
        <span class="title" style="margin-left: 30px;">栏目信息:</span>
      </div>
      <el-form :label-position="labelPosition" label-width="120px" :model="form" ref="form" :rules="rules">
        <el-form-item label="模块栏目:" prop="modular">
          <el-select v-model="form.modular" placeholder="请选择"  @change="changeGoodLeiMu(form.modular)">
            <el-option
              v-for="item in modularList"
              :key="item.value"
              :label="item.description"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="栏目类型:" prop="lanmu" v-if="lanmuType === '1'">
          <el-select v-model="form.lanmu" placeholder="请选择"  @change="changeBuLiaoLeiMu(form.lanmu)">
            <el-option
              v-for="item in lanmuList"
              :key="item.value"
              :label="item.description"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="栏目类型:" prop="lanmu" v-if="lanmuType === '2'">
          <el-select v-model="form.lanmu" placeholder="请选择"  @change="changeBuLiaoLeiMu(form.lanmu)">
            <el-option
              v-for="item in lanmuList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <div v-if="lanmuType === '1' || lanmuType === '2'">
          <span class="title">基本信息:</span>
        </div>
        <el-form-item label="标题名称:" prop="title" v-if="titleShow && lanmuType === '1'">
          <el-input v-model="form.title"  placeholder="请输入标题名称" ></el-input>
        </el-form-item>
        <el-form-item label="信息类型:" prop="infoType" v-if="infoTypeShow  && lanmuType === '1'">
          <el-select v-model="form.infoType" placeholder="请选择" @change="chooseInfoType(form.infoType)">
            <el-option
              v-for="item in infoTypeList"
              :key="item.value"
              :label="item.description"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="信息简短概述:" prop="breif" v-if="breifShow  && lanmuType === '1'">
          <el-input v-model="form.breif"  placeholder="请输入简短概述" ></el-input>
        </el-form-item>
        <el-form-item label="核心搜索词:" prop="mainSearch" v-if="mainSearchShow  && lanmuType === '1'">
          <el-input v-model="form.mainSearch"  placeholder="请输入核心搜索词" ></el-input>
        </el-form-item>
        <el-form-item label="信息主图/封面:" prop="infoType" v-if="lanmuType === '1'">
          <el-upload
            action="/app/sys/oss/upload"
            list-type="picture-card"
            :on-success="handleUploadSuccess"
            :on-remove="handleRemove"
            :multiple="true"
            :file-list="pictureList"
            :on-preview="handlePictureCardPreview">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <el-form-item label="正文内容:"  v-if="articleShow  && lanmuType === '1'" >
          <Ueditor :defaultMsg=defaultMsg :config=config :id=ue1 ref="ue"></Ueditor>
        </el-form-item>
        <el-form-item label="信息来源:" prop="infoSource " v-if="lanmuType === '1'">
          <el-input v-model="form.infoSource"  placeholder="请输入信息来源" ></el-input>
        </el-form-item>
        <el-form-item label="该条信息发布人:" prop="infoPublisher" v-if="lanmuType === '1'">
          <el-input v-model="form.infoPublisher"  placeholder="请输入信息发布人"></el-input>
        </el-form-item>
        <!--pc发布-->
        <el-form-item label="商品标题:" prop="title " v-if="lanmuType === '2'">
          <el-input v-model="form.title" placeholder="请输入商品标题"></el-input>
        </el-form-item>
        <el-form-item label="来源:" prop="source " v-if="lanmuType === '2'">
          <el-input v-model="form.source" placeholder="请输入来源"></el-input>
        </el-form-item>
        <el-form-item label="描述:" prop="description" v-if="lanmuType === '2'">
          <el-input type="textarea" rows="3" v-model="form.description" placeholder="请输入简短描述"></el-input>
        </el-form-item>
        <el-form-item label="正文内容:"  v-if="articleShow  && lanmuType === '2'" >
          <Ueditor :defaultMsg=defaultMsg :config=config :id=ue1 ref="ue"></Ueditor>
        </el-form-item>
        <div v-if="lanmuType === '2'">
          <span class="title">图片信息（提示：只能上传一张图片，如果要更换，请先删除已有图片）:</span>
        </div>
        <el-form-item label="封面图片:" v-if="lanmuType === '2'">
        <el-upload v-if="lanmuType === '2'"
          action="/app/sys/oss/upload"
          list-type="picture-card"
          :file-list="pictureList"
          :multiple="false"
          :limit="1"
          :on-success="handleUploadSuccess"
          :on-remove="handleRemove"
          :on-preview="handlePictureCardPreview">
          <i class="el-icon-plus"></i>
        </el-upload>
        </el-form-item>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <div class="displayImg" :class="prority? 'prodisplayImg': ''" @click="setPrority()" v-if="lanmuType === '2'">
          Whether to set the priority display？
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-top: 30px;">
        <el-button type="danger">取 消</el-button>
        <el-button type="primary" @click="publishFanHall">确 定</el-button>
      </div>
  </div>

</template>

<script>
  import { getDictList } from '@/api/information'
  // import { pubulishFalhall } from '@/api/fanhallList'
  import { deleteGood } from '@/api/goods'
  import { mapGetters } from 'vuex'
  import waves from '@/directive/waves/index.js' // 水波纹指令
  import Ueditor from '@/components/ueditor'
  export default {
    components: {
      Ueditor
    },
    name: 'seller_index',
    directives: {
      waves
    },
    data() {
      return {
        defaultMsg: '<span style="orphans: 2; widows: 2; font-size: 22px; font-family: KaiTi_GB2312; background-color: rgb(255, 255, 255);"><strong>请输入正文内容</strong></span>',
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 350
        },
        ue1: 'ue1', // 不同编辑器必须不同的id
        modularList: [], // 模块列表
        lanmuList: [], // 栏目列表
        infoTypeList: [], // 信息类型
        infoDialog: true, // 弹窗显示
        titleShow: true, // 标题显示
        breifShow: true, // 概要显示
        mainSearchShow: true,
        prority: false, // 是否设置优先级
        infoTypeShow: true, // 信息类型显示
        articleShow: true, // 正文内容显示
        updateinfoDialog: false, // 修改信息弹窗
        imgList: [], // 图片列表
        pictureList: [], // 列表
        status: '1',
        lanmuType: '',
        showIndex: '0', // 是否设置优先级
        trendsId: '', // trends类型id
        pictures: [], // 数据交互图片列表
        id: '', // 商品id
        dialogImageUrl: '',
        dialogVisible: false,
        list: null, // 列表数据
        total: null, // 总条数
        labelPosition: 'right',
        listLoading: true, // loading
        form: {
          modular: '',
          lanmu: '',
          title: '',
          breif: '',
          infoType: '',
          infoSource: '',
          source: '',
          infoPublisher: '',
          mainSearch: '',
          article: '',
          description: ''
        },
        rules: {
          modular: [
            {
              required: true,
              message: '模块类型没选',
              trigger: 'blur'
            }
          ],
          lanmu: [
            {
              required: true,
              message: '栏目类型没选',
              trigger: 'blur'
            }
          ],
          title: [
            {
              required: true,
              message: '标题内容没输入',
              trigger: 'blur'
            }
          ]
        }
      }
    },
    computed: {
      ...mapGetters(['permissions'])
    },
    created() {
      const that = this
      const modularTypeUrl = '/app/dict/modular_type'
      getDictList(modularTypeUrl, {}).then(response => {
        that.modularList = response.data.data
      })
      const infoTypeUrl = '/app/dict/information_type'
      getDictList(infoTypeUrl, {}).then(response => {
        that.infoTypeList = response.data.data
      })
    },
    mounted: function() {
    },
    methods: {
      changeGoodLeiMu(type) {
        const that = this
        that.lanmuType = type
        if (type === '1') {
          const lanmuUrl = '/app/dict/column_type'
          getDictList(lanmuUrl, {}).then(response => {
            that.lanmuList = response.data.data
          })
        } else {
          const url = '/app/mall/trends/list'
          getDictList(url, {}).then(response => {
            that.lanmuList = response.data.data
          })
        }
      },
      changeBuLiaoLeiMu(type) {
        const that = this
        that.trendsId = type
        // 图片
        that.form.infoType = ''
        if (that.form.modular === '1' && type === '1') {
          that.titleShow = false
          that.breifShow = false
          that.mainSearchShow = false
          that.infoTypeShow = false
          that.articleShow = false
        } else {
          that.titleShow = true
          that.breifShow = true
          that.mainSearchShow = true
          that.infoTypeShow = true
          that.articleShow = true
        }
      },
      chooseInfoType(type) {
        const that = this
        if (type === '8') {
          that.titleShow = false
          that.breifShow = false
          that.mainSearchShow = false
          that.articleShow = false
        } else {
          that.titleShow = true
          that.breifShow = true
          that.mainSearchShow = true
          that.articleShow = true
        }
      },
      // 是否设置优先显示
      setPrority() {
        const that = this
        that.prority = !that.prority
        if (that.prority) {
          that.showIndex = '1'
        } else {
          that.showIndex = '0'
        }
      },
      publishFanHall() {
        const that = this
        if (that.lanmuType === '1') {
          if (that.articleShow) {
            var articleText = ''
            that.$refs.ue.getUEContent()
            articleText = this.$refs.ue.getUEContent()
          }
          const picarr = []
          that.imgList.forEach(function(item) {
            const obj = {
              picture: item.response.data,
              url: ''
            }
            picarr.push(obj)
          })
          console.log(picarr)
          const prams = {
            modularType: that.form.modular,
            columnType: that.form.lanmu,
            pictures: picarr,
            title: that.form.title,
            text: articleText,
            informationType: that.form.infoType,
            briefOverview: that.form.breif,
            informationSource: that.form.infoSource,
            publisher: that.form.infoPublisher
          }
          const url = '/app/yykFashionLobby/add'
          deleteGood(url, prams).then(response => {
            // console.log(response)
            if (response.data.code === '0') {
              setTimeout(function() {
                that.$message.success('提交成功')
              }, 500)
              that.$router.go(0)
            }
          })
        } else {
          if (that.articleShow) {
            var articlePcText = ''
            that.$refs.ue.getUEContent()
            articlePcText = this.$refs.ue.getUEContent()
          }
          const pic = that.imgList[0].response.data
          const param = {
            trendsId: that.trendsId,
            title: that.form.title,
            imageUrl: pic,
            description: that.form.description,
            article: articlePcText,
            source: that.form.source,
            showIndex: that.showIndex
          }
          const url = '/app/operate/trends/detail/add'
          deleteGood(url, param).then(response => {
            // console.log(response)
            if (response.data.code === '0') {
              setTimeout(function() {
                that.$message.success('提交成功')
              }, 500)
              that.$router.go(0)
            }
          })
        }
      },
      // 图片上传
      handleAvatarSuccess(response) {
        this.form.topPicture = response.data
      },
      handleUploadSuccess(response, file, fileList) {
        this.imgList = fileList
        console.log(this.imgList)
        const arr = []
        this.imgList.forEach(function(item) {
          arr.push(item.url)
        })
        this.pictures = arr
      },
      // 图片删除
      handleRemove(file, fileList) {
        this.pictureList = fileList
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      }
    }
  }
</script>
<style scoped>
  .title{
    font-weight: bold;
    font-size: 24px;
  }

  .el-input {
    position: relative;
    font-size: 14px;
    display: inline-block;
    width: 80% !important;
  }
  .el-form {
    margin-left: 36px;
  }
  .is-disabled{
    background-color: #fff;
  }
  .inputRow{
    background-color: #fff !important;
    display: block;
    width: 65%;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    border: 1px solid #f5f5f5;
  }
  .el-input__inner{
    background-color: #fff !important;
  }
  .el-input__inner{
    background-color: #fff !important;
  }
  .textareaCon{
    width: 80%;
    border: 1px solid #f5f5f5;
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 15px;
  }
  .el-select{
    width: 80% !important;
  }
  .imgContent{
    padding: 5px;
  }
  .picContent{
    width: 100%;
  }
  .goodImg {
    width: 30px;
    height: 30px;
  }
  .topPic{
    width: 300px;
  }
  .el-input{
    width: 80%;
  }
  .avatar{
    width: 250px;
  }
  .el-button--mini, .el-button--mini.is-round {
    padding: 7px 15px;
    margin-bottom: 10px
  }
  .displayImg{
    background: url(../../../assets/img/nochoose.jpg);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 2% 5px;
    padding-left: 40px;
  }
  .prodisplayImg{
    background: url(../../../assets/img/choose.jpg);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 2% 5px;
    padding-left: 40px;
  }
</style>
